<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>云养仓鼠 - 虚拟宠物养成</title>
    <link rel="stylesheet" href="styles.css">
    <link href="https://cdn.bootcdn.net/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
</head>
<body>
    <div class="container">
        <!-- 导航栏 -->
        <nav class="navbar">
            <h1><i class="fas fa-home"></i> 云养仓鼠</h1>
            <div class="nav-links">
                <button class="nav-btn active" data-page="home">首页</button>
                <button class="nav-btn" data-page="pet">我的仓鼠</button>
                <button class="nav-btn" data-page="leaderboard">排行榜</button>
            </div>
        </nav>

        <!-- 首页 -->
        <div id="home-page" class="page active">
            <div class="welcome-section">
                <h2>欢迎来到云养仓鼠！</h2>
                <p>在这里，你可以领养一只可爱的虚拟仓鼠，照顾它的日常生活</p>
            </div>
            
            <div class="hamster-selection">
                <h3>选择你的仓鼠</h3>
                <div class="hamster-cards">
                    <div class="hamster-card" data-hamster="golden">
                        <div class="hamster-avatar">🐹</div>
                        <h4>金色仓鼠</h4>
                        <p>活泼好动的小家伙</p>
                        <button class="adopt-btn">领养</button>
                    </div>
                    <div class="hamster-card" data-hamster="white">
                        <div class="hamster-avatar">🐭</div>
                        <h4>白色仓鼠</h4>
                        <p>温顺可爱的小天使</p>
                        <button class="adopt-btn">领养</button>
                    </div>
                    <div class="hamster-card" data-hamster="gray">
                        <div class="hamster-avatar">🐁</div>
                        <h4>灰色仓鼠</h4>
                        <p>聪明机智的小精灵</p>
                        <button class="adopt-btn">领养</button>
                    </div>
                </div>
            </div>
        </div>

        <!-- 宠物页面 -->
        <div id="pet-page" class="page">
            <div class="pet-header">
                <h2>我的仓鼠 - <span id="hamster-name">小宝贝</span></h2>
                <button id="rename-btn" class="icon-btn"><i class="fas fa-edit"></i></button>
            </div>
            
            <div class="pet-container">
                <div class="hamster-display">
                    <div id="hamster-emoji" class="hamster-emoji">🐹</div>
                    <div class="hamster-status">
                        <div class="status-item">
                            <span>饱食度</span>
                            <div class="progress-bar">
                                <div id="hunger-bar" class="progress-fill" style="width: 80%"></div>
                            </div>
                            <span id="hunger-value">80%</span>
                        </div>
                        <div class="status-item">
                            <span>清洁度</span>
                            <div class="progress-bar">
                                <div id="clean-bar" class="progress-fill" style="width: 75%"></div>
                            </div>
                            <span id="clean-value">75%</span>
                        </div>
                        <div class="status-item">
                            <span>心情值</span>
                            <div class="progress-bar">
                                <div id="mood-bar" class="progress-fill" style="width: 90%"></div>
                            </div>
                            <span id="mood-value">90%</span>
                        </div>
                    </div>
                </div>
                
                <div class="action-buttons">
                    <button id="feed-btn" class="action-btn">
                        <i class="fas fa-utensils"></i>
                        喂食
                    </button>
                    <button id="clean-btn" class="action-btn">
                        <i class="fas fa-bath"></i>
                        清洁
                    </button>
                    <button id="play-btn" class="action-btn">
                        <i class="fas fa-gamepad"></i>
                        玩耍
                    </button>
                </div>
                
                <div class="pet-info">
                    <h3>成长记录</h3>
                    <p>领养天数: <span id="adopt-days">1</span> 天</p>
                    <p>互动次数: <span id="interactions">0</span> 次</p>
                </div>
            </div>
        </div>

        <!-- 排行榜页面 -->
        <div id="leaderboard-page" class="page">
            <h2>仓鼠健康排行榜</h2>
            <div class="leaderboard-list" id="leaderboard-list">
                <!-- 动态生成排行榜内容 -->
            </div>
        </div>
    </div>

    <script src="script.js"></script>
</body>
</html>